사이트 내 전체검색
자바스크립트
HTML 강좌 STYLE SHEET 위치제어 (DIV 위치 position:relative,absolute)
로빈아빠
https://cmd.kr/javascript/10 URL이 복사되었습니다.
5,423 0 2009.01.22 22:39

본문

HTML 강좌 STYLE SHEET 위치제어

손님
2005.10.28 16:11:00
http://cafe.naver.com/q69/8208

HTML 강좌 STYLE SHEET 위치제어



위치제어란 어떤 내용을 자신이 원하는 곳에다가 마음대로 놓을수 있는것을 말합니다.
스타일시트의 위치에 관한 옵션은 positon 과 z-index 와 left 그리고 top 등이 있습니다.
그 형식은 embeded로는



<style type='text/css'>
적용될태그 {position:값;z-index:값;top:값;left:값}
</style>
.
.
<적용될태그>

inline으로는


<적용될태그 style="position:값;z-index:값;top:값;left:값">

이 되겠죠.. 물론 위치제어또한 embeded는 적용될태그 전부를 해당위치에다 놓는것이고 inline은 지정해준 하나의 태그만 그 위치에 갖다놓습니다. embeded와 inline의 특징을 생각하면 쉽죠


① 위치지정옵션 positon

position은 말그대로 위치를 어디에 지정하겠다는 시작을 알리는 겁니다. 그 값은 absolute와 relative가 있습니다. 따라서 position:absolute를 하게되면 위치를 절대적으로 지정하는 것이고 position:relative는 상대적으로 위치를 지정해주는 것입니다.
절대적으로 지정하는건 뭐고 상대적으로 지정하는건 뭐냐고요?

※ 절대적인 위치지정
어떠한 내용의 위치를 강제적으로 지정해 줄수 있는 기능입니다. 비록 지정했던 곳에 다른 그림이나 글들이 있다고 해도 말이죠. 절대위치는 position:absolute가 됩니다.
자, 이렇게 스타일의 절대위치를 쓸 마음을 먹었다면 어디에다 그 위치를 잡을지를 결정해야겠죠. 이를 top과 left옵션이 담당합니다. 따라서 position옵션은 top과 left옵션과 항상 같이 쓰이죠. opsition;absolute;top:값;left:값 이런식으로. 그 위치단위는 픽셀이고요.
스타일의 절대위치의 좌표는 화면전체에 해당합니다.
즉, 화면상단의 왼쪽이 기준점의 시작이라는거죠..

jun.gif 거기서부터 밑으로 10픽셀만큼만 내리고 싶다면 top:10으로 주시면 됩니다.
또 거기에다 왼쪽으로부터 오른쪽으로 30픽셀만큼만 이동하고 싶으면 left:30으로 주면 되는것이죠..
그리고 이것들을 병렬처리로 붙이면 됩니다. position:absolue;top10;left:30 이런식으루 말이죠.이는 절대위치이기 때문에 조건이 어떠하든 무조건 전체화면의 그위치에 표시하게 해줍니다.
DAUM카페에서 옆 메뉴바를 개조하는 건 바로 이걸 이용해서 바꾸는거죠. 물론 이만큼 알고 바꾸는 사람은 몇안될테지만..--;

이제 예제를 들어봅시다.



embeded방식 inline방식
<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {position:absolute;top:150;left:100}
</style>
</head>
<body>
<font>나는 할 수 있다</font>
</body>
</html>
 <font style="position:absolute;top:150;left:100">나는 할 수 있다</font>


실행화면
'나는 할 수 있다'라는 내용의 위치를 top:150과 left:100으로 강제 지정해줬습니다.
이해 되시죠? 저기 top와 left의 값만 바꿔주면 화면상의 어디든지 위치 지정이 가능합니다. <font>태그말고 다른 태그를 적용시켜 볼까요



embeded방식 inline방식
<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
image {position:absolute;top:150;left:100}
</style>
</head>
<body>
<image src=kitty.gif>
</body>
</html>
 <image src=kitty.gif style="position:absolute;top:150;left:100">


실행화면
<image>태그를 예로 들어봤습니다. 이것뿐 아니라 모든 태그를 이렇게 강제 위치지정을 해줄수 있습니다.
그럼 절대위치지정은 끝났고 상대위치지정에 대해 알아봅시다.

※ 상대적인 위치지정
화면전체가 아니라 어떤 특정한 다른것을 기준점을 삼아서 거기에 상대적으로 위치를 지정하는 값입니다. 상대위치는 position:relative가 되죠. 물론 상대적으로도 얼만큼 떨어져서 위치를 잡아야 결정해야 하므로 top과 left옵션도 같이 쓰입니다.

jun2.gif 왼쪽의 '상대위치'라는 글씨로부터 위치를 지정하고 싶으면 그 기준점은 '상대위치'라는 글씨가 끝나는 저 빨간점이 기준점이 되는 것이죠
저 점을 기준으로 top과 left를 써서 얼만큼 떨어뜨려서 나타내주는가를 결정하는 겁니다. 따라서 표현하고자 할 내용은 저 글씨의 상대적인 위치가 되겠죠.

예제를 들어보겠습니다.



embeded방식 inline방식
<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {position:relative;top:10;left:15}
</style>
</head>
<body>
HTML TUTOR
<font>나는 할 수 있다</font>
</body>
</html>
 HTML TUTOR
<font style="position:relative;top:10;left:15">나는 할 수 있다</font>


실행화면
저기 'HTML TUTOR'라는 글씨를 기준으로 top:10과 left:15만큼 떨어뜨려서 '나는 할 수 있다'라는 글씨를 나타냈습니다.

상대위치에 관한 팁하나더.
절대위치가 회면 상단왼쪽이라서 더이상 위로, 왼쪽으로 갈수 없던 반면 상대위치는 기준점이 반드시 상단왼쪽에 자리잡아야 한다는 법이 없으므로 기준점보다 위로또는 왼쪽으로 갈수 있는 여지가 있죠. 따라서 top과 left값을 마이너스(-)로 줄 수 있습니다.



embeded방식 inline방식
<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {position:relative;top:-10;left:-15}
</style>
</head>
<body>
HTML TUTOR
<font>나는 할 수 있다</font>
</body>
</html>
 HTML TUTOR
<font style="position:relative;top:-10;left:-15">나는 할 수 있다</font>


실행화면


② 순서결정 z-index


상대위치나 절대위치로 지정을 하개되면 내용끼리 겹쳐지게 되는 경우가 있습니다. 그림과 글씨가 겹쳐진다던가 테이블과 그림이 겹친다던가 하는 경우가 있을테죠.
이럴때 z-index는 그 층의 순서를 결정해줍니다. 즉, 나중에 덮은 것이 우선권을 가지고 먼저 놓여있던 것은 기능이 묻히게 한다는것이죠.
보인다와 보이지 않는다의 개념과는 좀 다릅니다. 나중에 덮은것은 보이고 먼저 놓여있던 것은 보이지 않는법은 없습니다. 물론 그런경우도 있지만. 그냥 순서의 우선권을 부여하는것이기 때문에..



embeded방식 inline방식
<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
a {position:absolute;top:15;left:15; z-index:2}
font {position:absolute;top:15;left:15; z-index:1}
</style>
</head>
<body>
<a href=http://kr.yahoo.com target=_blank>야후코리아</a>
<font>나는 할 수 있다</font>
</body>
</html>
 <a href=http://kr.yahoo.com target=_blank style="position:absolute;top:15;left:15; z-index:2">야후코리아</a>
<font style="position:absolute;top:15;left:15; z-index:1">나는 할 수 있다</font>




실행화면

<a>태그와 <font>태그를 똑같이 겹쳐놨을때,
방금 예제는 <a>태그와 <font>태그의 우선권을 결정하는 예제였습니다.
<a>태그는 z-index가 2 이고 <font>는 z-index가 1 이므로 <font>가 먼저 놓이고 <a>가 나중에 덮은꼴이죠. 따라서 <a>태그가 우선권을 가집니다. 따라서 글씨위로 마우스를 가져갔을때 클릭이 가능한거죠
순서를 바꿔볼까요?




embeded방식 inline방식
<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
a {position:absolute;top:15;left:15; z-index:1}
font {position:absolute;top:15;left:15; z-index:2}
</style>
</head>
<body>
<a href=http://kr.yahoo.com target=_blank>야후코리아</a>
<font>나는 할 수 있다</font>
</body>
</html>
 <a href=http://kr.yahoo.com target=_blank style="position:absolute;top:15;left:15; z-index:1">야후코리아</a>
<font style="position:absolute;top:15;left:15; z-index:2">나는 할 수 있다</font>


실행화면
이번에는 <a>가 먼저 놓이고 <font>가 나중에 덮였으므로 <font>의 기능이 우선권을 가지고 <a>는 묻힙니다. 따라서 마우스를 가져가도 클릭이 안되는거죠
좀 복잡하지만 이해될 때 까지 반복학습 하세요.

위치제어 강좌는 이걸로 마치겠습니다. 태그연습장으로 꼭 연습해보세요

댓글목록

등록된 댓글이 없습니다.

자바스크립트
831 (17/17P)

Search

Copyright © Cmd 명령어 18.222.184.126